<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/img/logo.png" alt="my login image">
        </div>
        <!-- 手机号 天下三大奇文 -->
        <div class="text_group">
            <div :class="{input_group:true,'is-invalid':phoneInvalid}">
                <input v-model="loginForm.phoneId"  type="input" placeholder="手机号">
            </div>
            <div class="invalid-feedback" v-show="phoneInvalid">请输入手机号</div>
        </div>
        <!-- 验证码 -->
        <div class="text_group">
            <div :class="{input_group:true,'is-invalid':phoneInvalid}">
                <input v-model="loginForm.code" type="input" placeholder="验证码">
                <input type="button" @click="getCode" :value="sendBtnVal">
            </div>
            <div class="invalid-feedback" v-show="phoneInvalid">请输入验证码</div>
        </div>
        <div class="login_des">
            <p>
                新用户登录即自动注册，并表示已同意
                <span>《用户服务协议》</span>和<span>《隐私权政策》</span>
            </p>
        </div>
        <!-- 登录按钮 -->
        <div class="login_btn">
            <input class="denglu" type="button" @click="dl" value="登陆">
        </div>
    </div>

</template>

<script>
        import store from '@/store'
        import { Toast } from 'mint-ui';
    export default {
        name: "Login",
        data(){
            return {
                disabled:false,
                timer:null,
                reg:/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/,
                sendBtnVal:'获取验证码',
                phoneInvalid:false,
                loginForm:{
                    phoneId:"",
                    code:""
                }
            }
        },
        beforeRouteEnter(to,from,next){
          if(store.state.user.phoneId){
              next('/my')
          }
          next()
        },

        methods:{
            getCode(){
                if(this.reg.test(this.loginForm.phoneId)){
                    this.$axios.get("sendCode",{
                        params:{
                            phoneId:this.loginForm.phoneId
                        }
                    }).then(data=>{
                        console.log(data)
                        if(data.ok===1){
                            this.sendBtnVal=60
                            this.loginForm.code=data.code
                            this.timer=setInterval(()=>{
                                this.sendBtnVal--;
                                if(this.sendBtnVal<0){
                                    clearInterval(this.timer)
                                    this.disabled=false
                                    this.sendBtnVal="请输入验证码"
                                }
                            },1000)
                        }else{

                            Toast(data.msg);
                        }
                    })
                }else{
                    Toast('手机号码输入格式错误');
                    return;
                }
                this.disabled=true
                if(this.loginForm.phoneId.length<1){
                    this.phoneInvalid = true;
                    return
                }


            },
            dl(){
                if(this.loginForm.phoneId==""||this.loginForm.code==""){
                    this.phoneInvalid=true
                }
                this.$store.dispatch('denglu',this.loginForm)


                // this.$axios.post("login",this.loginForm)
                //
            },

        }
    }
</script>

<style scoped>
    .login {
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
    }
    .logo {
        text-align: center;
    }
    .logo img {
        width: 150px;
    }
    .text_group,
    .login_des,
    .login_btn {
        margin-top: 20px;
    }
    .login_des {
        color: #aaa;
        line-height: 22px;
    }
    .login_des span {
        color: #4d90fe;
    }
    .login_btn .denglu {
        display: block;
        width: 100%;
        height: 40px;
        background-color: #4cd96f;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        border: none;
        outline: none;
    }
    .login_btn button[disabled] {
        background-color: #8bda81;
    }


    .input_group {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .input_group input {
        height: 100%;
        width: 60%;
        border:none;
        outline: none;
    }
    .input_group button {
        border: none;
        outline: none;
        background: #fff;
    }
    .input_group button[disabled] {
        color: #aaa;
    }
    .is-invalid {
        border: 1px solid red;
    }
    .invalid-feedback {
        color: red;
        padding-top: 5px;
    }
</style>